<template>
	<view>
		<!-- 搜索 -->
		<view class="header">
			<!-- 搜索框 -->
			<view class="search">
				<image src="../../static/home_imgs/search.png"></image>
				<input type="text" placeholder="请输入商品名称">
			</view>
			<!-- 消息 -->
			<view class="location">
				<image src="../../static/shop_detail_imgs/客服.png"></image>
				<view class="icon-text">客服</view>
			</view>
		</view>
		<!-- 店铺 -->
		<view class="shop">
			<!-- 左边头像 -->
			<view class="shop-img">
				<image :src="shop.src"></image>
			</view>
			<!-- 右边介绍 -->
			<view class="shop-detail">
				<!-- 店铺名称 -->
				<view class="shop-detail-head">
					<view class="shop-text1">{{shop.name}}</view>
					<view>
						<text class="shop-text2">评分</text>
						<text class="shop-text3">{{shop.score}}</text>
					</view>
					<view @click="collect" style="display: flex;">
						<view class="shop-text4">收藏</view>
						<image
							:src="shop.collect?'../../static/shop_detail_imgs/聚收藏gift.png':'../../static/shop_detail_imgs/聚收藏.png'">
						</image>
					</view>
				</view>
				<!-- 星星 -->
				<view class="shop-detail-middle">
					<view>
						<image class="star" v-for="index of 4" :key="index" src="../../static/home_imgs/star2.png">
						</image>
						<image class="star" src="../../static/home_imgs/star.png"></image>
					</view>
					<view class="shop-text6">销量{{shop.sales}}</view>
				</view>
			</view>
		</view>
		<!-- 优惠券 -->
		<view class="coupon">
			<view class="coupon-head">· 平台通用优惠券 ·</view>
			<scroll-view scroll-x="true" style="display:flex;width: 100vw;height: 25vw;" enable-flex>
				<!-- 循环列表 -->
				<view class="coupon-body" v-for="(item,index) in couponList" :key="item.id">
					<!-- 左边 -->
					<view class="coupon-left">
						<view class="amount">
							<text class="amount-text1">{{item.text1}}</text>
							<text class="amount-text2">{{item.text2}}</text>
						</view>
						<view class="coupon-date">{{item.text3}}</view>
					</view>
					<!-- 右边 -->
					<view class="coupon-right">立即领取</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分类 -->
		<view class="class-list">
			<van-grid column-num="3" icon-size="0">
				<van-grid-item v-for="(item,index) in temp_class_list" use-slot :key="item.id" :data-index="index" @click="category">
					<view>
						{{item.name}}
					</view>
				</van-grid-item>
				<van-grid-item use-slot @click="handleClickMore">
					<view>
						{{class_list_show_all?'收起':'展开'}}
					</view>
				</van-grid-item>
			</van-grid>
		</view>
		<view class="coupon-head">· 全部商品 ·</view>
		<!-- 商品列表 -->
		<view class="goodsList">
			<!-- 商品 -->
			<view class="goods" v-for="item in orderList" :key="item.id">
				<image class="goods-img" :src="item.src" :data-id="item.id" @click="goodsDetail"></image>
				<view class="goods-name">{{item.name}}</view>
				<view class="goods-other">
					<view class="goods-price">
						<text class="goods-price-text1">{{item.price}}</text>
						<text class="goods-price-text2">元</text>
					</view>
					<view class="goods-icons" :data-id='item.id' @click="gouwuche">
						<image src="../../static/shop_detail_imgs/购物车.png"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 结算 -->
			<view class="count" v-if="totalprice<200">
				<view class="count-left">
					<image class="count-left-img" src="../../static/shop_detail_imgs/购物车.png"></image>
					<view class="count-left-text" v-if="totalprice==0">购物车是空的哦~</view>
					<view class="count-left-text" v-if="totalprice!=0">共{{totalprice}}元</view>
				</view>
				<view class="count-right">200元起送</view>
			</view>
			<view class="count" v-if="totalprice>=200">
				<view class="count-left2">
					<view  class="count-left-img2"><image src="../../static/shop_detail_imgs/购物车.png"></image></view>
					<view class="count-left-text">共{{totalprice}}元</view>
				</view>
				<view class="count-right2" v-if="totalprice!=0" @click="settlement">去结算</view>
			</view>
		<!-- 占位 -->
		<view style="height: 10vw;"></view>
	</view>
</template>

<script>
	var shopList = getApp().globalData.shopList
	var couponList = getApp().globalData.couponList
	var orderList = getApp().globalData.orderList
	export default {
		data() {
			return {
				class_list: [{
						id: 1,
						name: '蔬菜类',
						 
					},
					{
						id: 2,
						name: '水果类',
						 
					},
					{
						id: 3,
						name: '海鲜类',
						 
					},
					{
						id: 4,
						name: '海贝类',
						 
					},
					{
						id: 5,
						name: '家禽类',
						 
					},
					{
						id: 6,
						name: '鸡鸭肉类',
						 
					},
					{
						id: 7,
						name: '熟食类',
						 
					},
					{
						id: 8,
						name: '豆制品',
						 
					}
				],
				class_list_show_all: false,
				temp_class_list: [],
				couponList: [],
				shop: null,
				orderList: [],
				totalprice:0
			}
		},
		methods: {
			sliceClassList() {
				const {
					class_list,
					class_list_show_all
				} = this;
				this.temp_class_list = class_list.slice(0, class_list_show_all ? class_list.length :
					5)
			},
			handleClickMore() {
				this.class_list_show_all = !this.class_list_show_all;
				this.sliceClassList();
			},
			goodsDetail(e){
				let id=e.currentTarget.dataset.id
				wx.navigateTo({
					url:"./goods?id="+id
				})
			},
			collect() {
				shopList.forEach(item => item.id == this.shop.id ? item.collect = !item.collect : '')
			},
			gouwuche(e){
				let id=e.currentTarget.dataset.id
				this.orderList.forEach(v=> v.id == id?this.totalprice+=v.price:'');
				this.orderList.forEach(v=> v.id == id? v.num+=1 : '');
			},
			category(e){
				let index=e.currentTarget.dataset.index
				wx.navigateTo({
					url:"./goods_category?index="+index+"&shopid="+this.shop.id
				})
			},
			settlement(){
				wx.navigateTo({
					url:"./cart?shopId="+this.shop.id
				})
			}
		},
		onLoad(options) {
			let shopId=options.shopId
			this.sliceClassList()
			this.couponList = couponList
			orderList.forEach(item => item.shopid == shopId ? this.orderList.push(item): '')
			shopList.forEach(item => item.id == shopId ? this.shop = item : '')
		},
		onShow(){
			this.totalprice=0
			orderList.forEach(item => item.num!=0 ? this.totalprice+=item.price*item.num : '')
		}
	}
</script>

<style>
	page {
		background-color: rgb(246, 246, 246);
	}

	.header {
		padding: 1vw;
		display: flex;
		align-items: center;
		width: 100vw;
		background-color: #ffffff;
	}

	.location {
		margin: 0 4vw 0 3vw;
	}

	.location image {
		width: 5vw;
		height: 5vw;
	}

	.icon-text {
		text-align: center;
		font-size: 2.5vw;
	}

	.search {
		height: 8vw;
		font-size: 3vw;
		display: flex;
		align-items: center;
		width: 85vw;
		background-color: #e6e6e6;
		border-radius: 5vw;
		margin-left: 3vw;
	}

	.search image {
		margin: 0 3vw;
		width: 5vw;
		height: 5vw;
	}

	.search input {
		width: 75vw;
	}

	.shop {
		width: 100vw;
		/* height: 25vw; */
		margin: 1vw 0 1vw 0;
		padding: 3vw 3vw;
		display: flex;
		background-color: #00000010;
	}

	.shop-img image {
		margin-right: 4vw;
		width: 15vw;
		height: 15vw;
	}

	.shop-detail {
		width: 70vw;
	}

	.shop-detail-head {
		font-size: 3vw;
		display: flex;
		justify-content: space-between;
	}

	.shop-text2 {
		padding: 1px;
		margin-right: 1vw;
		background-color: #00000040;
		color: #ffffff;
		border-radius: 3px;
	}

	.shop-text4 {
		margin-right: 2vw;
		margin-left: 33vw;
	}

	.shop-detail-head image {
		width: 5vw;
		height: 5vw;
	}

	.shop-detail-middle {
		justify-content: space-between;
		align-items: center;
		margin: 4vw 0 0 0;
		display: flex;
	}

	.star {
		width: 4vw;
		height: 4vw;
	}

	.shop-text6 {
		font-size: 3vw;
		line-height: 6vw;
	}

	.coupon-head {
		background-color: #fff;
		padding: 2vh 0;
		text-align: center;
		margin: 0 auto;
		font-weight: 700;
	}

	.coupon-body {
		height: 20vw;
		border-radius: 8px;
		margin: 1vw;
		width: 55vw;
		display: flex;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.1)
	}

	.coupon-left {
		border-radius: 8px 0 0 8px;
		padding: 2vw;
		width: 50vw;
		background-color: #FEF3ED;
	}

	.amount-text1 {
		color: #FE0302;
		font-size: 20px;
		font-weight: 600;
	}

	.amount-text2 {
		color: #FE0302;
		font-size: 10px;
		margin-left: 13vw;
	}

	.coupon-date {
		margin-top: 4vw;
		font-size: 10px;
	}

	.coupon-right {
		font-weight: 600;
		border-radius: 0 8px 8px 0;
		color: #FE0302;
		padding: 2vw;
		font-size: 10px;
		width: 4vw;
		background-color: #fecaca;
	}

	.goodsList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.goods {
		background-color: #fff;
		width: 46vw;
		border-radius: 3vw;
		margin: 2vw;
	}

	.goods-img {
		width: 45vw;
		height: 45vw;
		border-radius: 3vw;
	}

	.goods-name {
		font-size: 3vw;
		width: 44vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding: 0 2vw;
	}

	.goods-other {
		display: flex;
		margin: 2vw 2vw;
		justify-content: space-between;
		align-items: center;
	}

	.goods-price {}

	.goods-price-text1 {
		font-size: 4vw;
	}

	.goods-price-text2 {
		font-size: 3vw;
	}

	.goods-icons image {
		width: 5vw;
		height: 5vw;
	}

	.count {
		position: fixed;
		display: flex;
		bottom: 0;
		height: 10vw;
		background-color: #fff;
	}

	.count-left {
		display: flex;
		width: 70vw;
		align-items: center;
		justify-content: center;
	}

	.count-left-img {
		width: 5vw;
		height: 5vw;
		margin-right: 4vw;
		position: absolute;
		left: 3vw;
	}

	.count-left-text {
		font-size: 3.5vw;
	}

	.count-right {
		text-align: center;
		font-size: 4vw;
		width: 30vw;
		background-color: #808080;
		color: #fff;
		line-height: 10vw;
	}
	.count-left-img2{
		background-color: #fff;
		border-radius: 90%;
		width: 11vw;
		height: 11vw;
		position: absolute;
		bottom: 2.5vw;
		left: 5vw;
		box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.3);
		z-index: 3;
	}
	.count-left-img2 image{
		margin: 2vw;
		width: 7vw;
		height: 7vw;
		background-color: #fff;
		border-radius: 90%;
	}
	.count-left2 {
		display: flex;
		width: 70vw;
		align-items: center;
		justify-content: flex-end;
		margin: 0 3vw 0 0 ;
	}
	.count-right2 {
		text-align: center;
		font-size: 4vw;
		width: 30vw;
		background-color: #FE0302;
		color: #fff;
		line-height: 10vw;
	}
</style>
